<template>
    <el-skeleton style="width: 100%; height: 100%;" :loading="!loading" animated>
        <template #template>
            <el-skeleton-item variant="image" style="width: 100%;height: 65%;border-radius:4px" />
            <div style="
                    margin-top:10px;
                    height:35%;
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-items: conter;
                    gap:5px 0;
                    ">
                <el-skeleton-item variant="text" style="width: 100%" />
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 60%"/>
            </div>
        </template>
        <template #default>
            <div class="Box">
                <div class="imgBox">
                    <img :src="props.cover" @click="goVideo"/>
                    <div class="viPlayInfo">
                        <p>
                            <span>
                                <img src="@/assets/searchIcon/play.png" >
                                {{ props.plays }}
                            </span>
                        </p>
                    </div>
                    <span class="afterCard">
                        <img src="@/assets/videoCardIcon/ZY.png" style="height:17px"/>
                        <span>综艺</span>
                    </span>
                    <span class="txtShadow"></span>
                </div>
                <div class="infoBox">
                    <p @click="goVideo">{{ props.sub_title }}</p>
                    <p class="avUpinfo">{{ props.title }}</p>
                </div>
            </div> 
        </template>
    </el-skeleton>
</template>

<script lang="ts" setup>
import { formatNum,formatTime,voideoAllTime,formatMD } from '@/utils/format'
import { ref } from 'vue'

interface Props{
    cover:string
    title:string        //up
    sub_title:string    //标题
    plays:string
}
const props = defineProps<Props>()
let loading = ref<boolean>(false)
function goAuthor(){
    console.log('去作者主页')
}
let timer = setTimeout(() => {
    loading.value = true
    clearTimeout(timer)
},1000)

function goVideo(){
    console.log('去看')
}
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/publicNodeStyle.scss);
p{
    padding: 0;
    margin: 0;
}
.Box{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
    width: 100%;
    border: 1px solid #E3E5E7;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
}
.imgBox{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 65%;
    & img:nth-child(1){
        width: 100%;
        height: 100%;
        border-radius: 4px;
        cursor: pointer;
    }
}
.txtShadow{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 30px;
    background: linear-gradient(rgb(255, 255, 255,0) 0,rgb(0, 0, 0,0.8));
    border-radius: 4px;
}
.infoBox{
    padding: 10px 5px 0 5px;
    box-sizing: border-box;
    width: 100%;
    height: 35%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    & p:nth-child(1){
        line-height: 20px;
        font-size: 15px;
        color: #18191C;
        @include tweLineShow;
        height: 40px;
        text-align: left;
        cursor: pointer;
    }
    & p:nth-child(1):hover{
        color:#409EFF;
    }
    
}
.viPlayInfo{
    padding:0 10px;
    box-sizing: border-box;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    font-size: 13px;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    & p:nth-child(1){
        width: 50%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
    }
    & p:nth-child(1) span{
        @include flexRowCenter;
        flex-wrap: nowrap;
    }
    & p:nth-child(1) span img:nth-child(1) {
        margin-right: 3px;
        margin-bottom: 2px;
        width:15px;
        height:15px;
    }
}
.avUpinfo{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 3px;
    color: #9499A0;
    font-size: 13px;
    white-space: nowrap;
}
</style>